
import React from "react";
import {Button, Form, Input, TreeSelect} from "antd";
import FormInput from "../form/FormInput";
import FormUpload from "../form/FormUpload";
import FormMulInput from "../form/FormMulInput";
import FormSelect from "../form/FormSelect";
import FormMulSelect from "../form/FormMulSelect";
import FormTimePicker from "../form/FormTimePicker";
import FormDatePicker from "../form/FormDatePicker";
import FormMonthPicker from "../form/FormMonthPicker";
import FormYearPicker from "../form/FormYearPicker";
import FormRadio from "../form/FormRadio";
import FormCheckBox from "../form/FormCheckBox";
import FormPointPicker from "../form/FormPointPicker";
import FormPasswordInput from "../form/FormPasswordInput";
import FormTimeRangePicker from "../form/FormTimeRangePicker"
import FormDateRangePicker from "../form/FormDateRangePicker"
import FormMonthRangePicker from "../form/FormMonthRangePicker"
import FormYearRangePicker from "../form/FormYearRangePicker"
import service from "../../libs/request";
const { TreeNode } = TreeSelect;

/**
 * 下拉选择框
 */
class FormTreeSelect extends React.Component{
    treeSelectRef = React.createRef();

    handleSelectChange = (value,data,e) => {
        const config_data = e.triggerNode.props;
        if(config_data.hasOwnProperty("ext_config")){
            const ext = config_data.ext_config;
            this.setState({fields:ext});
        }
        this.onChangeHandel(value)
    };

    onChangeHandel = (value) =>{
        console.log("FormTreeSelect onChangeHandel value:",value)
        const {
            targetItems,// 联动异步查询
            changeValueAction,// 联动异步查询
            form_my_xuan_jian_store,
            form_store,
        } = this.props;
        let store;
        if(form_my_xuan_jian_store){
            store=form_my_xuan_jian_store
        }else if(form_store){
            store=form_store
        }
        if(changeValueAction && store){
            //通知正在执行ajax
            store.setAjax(true);
            service.request({
                url:changeValueAction.uri,
                method:"get",
                params:{
                    value:value
                },
            }).then(response => {
                store.setAjax(false);
                if (response.data.code === 200){
                    // 假设 response.data 是一个对象，其键与 targetItems 中的 id 对应
                    // 并且你想要更新与这些 id 相关的表单字段
                    // console.log("targetItems",targetItems)
                    Object.keys(response.data.data).forEach(id => {
                        // 找到与 id 对应的 targetItem
                        const targetItem = targetItems.find(item => item.id === id);
                        if (targetItem) {
                            store.setFieldAddonBefore(targetItem.name,response.data.data[id]);
                        }
                    });
                }
            }).catch(err=>{
                store.setAjax(false);
            })
        }
    };

    constructor(props) {
        super(props);
        let { ext_config } = props;
        if(!ext_config){
            ext_config = [];
        }
        console.log("constructor ext_config",ext_config);
        this.state = {
            fields:ext_config
        };
    }

    render() {
        const {getFieldDecorator} = this.props.form;
        /**
         * options 传一个对象 {key:value}apiGroupList
         */
        const {label,field,initialValue,rules,allowClear,showSearch,placeholder,dropdownStyle,treeData,showLeafOnly,readonly,disabled,multiple,treeCheckable} = this.props;

        const renderTreeNodes = data => data.map(item =>{
            console.log('item',item);
            if(showLeafOnly){
                if(item.is_leaf){
                    item.disabled = false;
                }else {
                    item.disabled = true;
                }
                if(item.children){
                    return (
                        <TreeNode key={item.key} title={item.title} value={item.value} disabled={item.disabled}>
                            {renderTreeNodes(item.children)}
                        </TreeNode>
                    );
                }
                return <TreeNode {...item} key={item.key} title={item.title} value={item.value} disabled={item.disabled} />
            }else {
                if(item.children){
                    item.disabled = true;
                    return (
                        <TreeNode key={item.key} title={item.title} value={item.value} disabled={item.disabled}>
                            {renderTreeNodes(item.children)}
                        </TreeNode>
                    );
                }
                return <TreeNode {...item} key={item.key} title={item.title} value={item.value}  />
            }
        });

        return (
            <>
                <Form.Item label={label ? label : "下拉选择框"}>
                    {getFieldDecorator(field ? field : "default_tree_select", {initialValue: initialValue,rules: rules ? rules : []})(
                        <TreeSelect
                            dropdownStyle={dropdownStyle?dropdownStyle:{maxHeight: 800, overflow: 'auto'}}
                            showSearch={showSearch ? showSearch : false}
                            allowClear={allowClear ? allowClear : false}
                            {...(disabled || readonly ? { disabled: true } : {})}
                            {...(multiple ? { multiple: true } : {})}
                            {...(treeCheckable ? { treeCheckable: true } : {})}
                            placeholder={placeholder ? placeholder : "请选择..."}
                            treeDefaultExpandAll
                            onChange={this.handleSelectChange}
                        >
                            {renderTreeNodes(treeData)}
                        </TreeSelect>
                    )}
                </Form.Item>
                {this.state.fields.map((item,index) => {
                    console.log('item2',item);
                    if (item["component"] === "FormUpload"){
                        return <FormUpload key={index} form={this.props.form} field={item["field"]}  label={item["label"]} single={item["single"]} fileType={item["fileType"]} initialValue={item["initialValue"]} rules={item["rules"]}  disabled={item["disabled"]}/>
                    }else if (item["component"] === "FormInput"){
                        return <FormInput key={index} form={this.props.form} label={item["label"]} field={item["field"]} allowClear={item["allowClear"]} placeholder={item["placeholder"]} initialValue={item["initialValue"]} rules={item["rules"]}  disabled={item["disabled"]} addonAfter={item["addonAfter"]} addonBefore={item["addonBefore"]}/>
                    }else if (item["component"] === "FormMulInput"){
                        return <FormMulInput key={index} form={this.props.form} label={item["label"]} field={item["field"]}  placeholder={item["placeholder"]} rows={item["rows"]} allowClear={item["allowClear"]} initialValue={item["initialValue"]} rules={item["rules"]} disabled={item["disabled"]}/>
                    }else if (item["component"] === "FormSelect"){
                        return <FormSelect key={index} form={this.props.form} label={item["label"]} field={item["field"]} options={item["options"]} allowClear={item["allowClear"]} showSearch={item["showSearch"]} placeholder={item["placeholder"]} initialValue={item["initialValue"]} rules={item["rules"]}  disabled={item["disabled"]}/>
                    }else if (item["component"] === "FormMulSelect"){
                        return <FormMulSelect key={index} form={this.props.form} label={item["label"]} field={item["field"]} options={item["options"]} showSearch={item["showSearch"]} placeholder={item["placeholder"]} allowClear={item["allowClear"]} initialValue={item["initialValue"]} rules={item["rules"]} disabled={item["disabled"]} />
                    }else if (item["component"] === "FormTimePicker"){
                        return <FormTimePicker key={index} form={this.props.form}  label={item["label"]} field={item["field"]} disabled={item["disabled"]} placeholder={item["placeholder"]} initialValue={item["initialValue"]} rules={item["rules"]}/>
                    }else if (item["component"] === "FormDatePicker"){
                        return <FormDatePicker key={index} form={this.props.form} label={item["label"]} field={item["field"]} disabled={item["disabled"]} placeholder={item["placeholder"]} initialValue={item["initialValue"]} rules={item["rules"]}/>
                    }else if (item["component"] === "FormMonthPicker"){
                        return <FormMonthPicker key={index} form={this.props.form} label={item["label"]} field={item["field"]} disabled={item["disabled"]} placeholder={item["placeholder"]} initialValue={item["initialValue"]} rules={item["rules"]}/>
                    }else if (item["component"] === "FormYearPicker"){
                        return <FormYearPicker key={index} form={this.props.form} label={item["label"]} field={item["field"]} disabled={item["disabled"]} placeholder={item["placeholder"]} initialValue={item["initialValue"]} rules={item["rules"]} />
                    }else if (item["component"] === "FormRadio"){
                        return <FormRadio key={index} form={this.props.form} label={item["label"]} field={item["field"]} options={item["options"]} initialValue={item["initialValue"]} rules={item["rules"]}  disabled={item["disabled"]}/>
                    }else if (item["component"] === "FormCheckBox"){
                        return <FormCheckBox key={index} form={this.props.form} label={item["label"]} field={item["field"]} options={item["options"]} initialValue={item["initialValue"]} rules={item["rules"]}  disabled={item["disabled"]}/>
                    }else if (item["component"] === "FormPointPicker"){
                        return <FormPointPicker key={index} form={this.props.form} placeholder={item["placeholder"]} field={item["field"]} initialValue={item["initialValue"]} rules={item["rules"]}  disabled={item["disabled"]}/>
                    }else if (item["component"] === "FormPasswordInput"){
                        return <FormPasswordInput key={index} form={this.props.form} label={item["label"]} field={item["field"]} allowClear={item["allowClear"]} placeholder={item["placeholder"]} initialValue={item["initialValue"]} rules={item["rules"]} disabled={item["disabled"]}/>
                    }else if (item["component"] === "FormTimeRangePicker"){
                        return <FormTimeRangePicker key={index} form={this.props.form} label={item["label"]} disabled={item["disabled"]} field={item["field"]} allowClear={item["allowClear"]} placeholder={item["placeholder"]} start={item["start"]} end={item["end"]} rules={item["rules"]}/>
                    }else if (item["component"] === "FormDateRangePicker"){
                        return <FormDateRangePicker key={index} form={this.props.form} label={item["label"]} disabled={item["disabled"]} field={item["field"]} allowClear={item["allowClear"]} placeholder={item["placeholder"]} start={item["start"]} end={item["end"]} rules={item["rules"]}/>
                    }else if (item["component"] === "FormMonthRangePicker"){
                        return <FormMonthRangePicker key={index} form={this.props.form} label={item["label"]} disabled={item["disabled"]} field={item["field"]} allowClear={item["allowClear"]} placeholder={item["placeholder"]} start={item["start"]} end={item["end"]} rules={item["rules"]}/>
                    }else if (item["component"] === "FormYearRangePicker"){
                        return <FormYearRangePicker key={index} form={this.props.form} label={item["label"]} disabled={item["disabled"]} field={item["field"]} allowClear={item["allowClear"]} placeholder={item["placeholder"]} start={item["start"]} end={item["end"]} rules={item["rules"]}/>
                    }else if(item["component"] === "FormTreeSelect"){
                        return <FormTreeSelect key={index} form={this.props.form} label={item["label"]}  treeData={item["options"]}  initialValue={item["initialValue"]} disabled={item["disabled"]} field={item["field"]} allowClear={item["allowClear"]} placeholder={item["placeholder"]} rules={item["rules"]} showLeafOnly={item["showLeafOnly"]}/>
                    }else if (item["component"] === "BUTTON"){
                        return <div key={index} style={{width:528,margin:"0 auto"}}><Button href={this.state.href} icon={item["icon"]} size={item["size"]} target={item["target"]} type={item["type"]} block={item["block"]} onClick={(e) => {this.handleButtonClick(item["href"],item["name"]);return false;}}>{item["label"]}</Button></div>
                    }else {
                        return <FormInput key={index} form={this.props.form} label={item["label"]} field={item["field"]} allowClear={item["allowClear"]} placeholder={item["placeholder"]} initialValue={item["initialValue"]} rules={item["rules"]} disabled={item["disabled"]}/>
                    }
                })}
            </>
        );
    }
}

export default FormTreeSelect;
